<#include "../base/basic-page.ftl">
<#include "../common/table.ftl">
<#include "../common/modal.ftl">
<#include "../common/form.ftl">
<@page_head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
<script type="text/javascript">
    window.list = ${page.records2json()};
</script>
</@page_head>
<@page_body page_title="测试" side_active="/admin/user/list">
    <div class="main-content container-fluid">
        <div class="row">
            <!--Responsive table-->
            <div class="col-sm-12">
                <@table_wrap
                table_title="用户列表"
                html_ex="ng-controller=\"tableCtrl\"
                ng-init=\"apiUrl='/api/user/list'\"">
                <@table_tools>
                    <button class="btn btn-space btn-primary"
                            data-toggle="modal"
                            data-target="#model-user-new">
                        新增用户
                    </button>
                    <button class="btn btn-space btn-danger"
                            data-toggle="modal"
                            data-target="#md-del-user">
                        加入黑名单
                    </button>
                    <label  ng-init="tagabc='这是'">Name:{{tagabc}}</label>
                    <#--<input type="text" ng-model="tag" placeholder="Enter a tag">-->
                </@table_tools>
                <@table extra="table-striped table-hover">
                    <@table_head>
                        <th style="width:5%;">
                            <label class="custom-control custom-control-sm custom-checkbox">
                                <input type="checkbox" class="custom-control-input">
                                <span class="custom-control-label"></span>
                            </label>
                        </th>
                        <th style="width:10%;">会员信息</th>
                        <th style="width:10%;">手机号码</th>
                        <th style="width:7%;">会员级别</th>
                        <th style="width:7%;">上级ID</th>
                        <th style="width:7%;">下级个数</th>
                        <th style="width:10%;" class="number">账户余额</th>
                        <th style="width:10%;">结算收益</th>
                        <th style="width:10%;">成交订单</th>
                        <th style="width:10%;">注册时间</th>
                        <th style="width:19%;">操作</th>
                    </@table_head>
                    <@table_body>

                        <tr ng-repeat="item in list">
                            <td>
                                <label class="custom-control custom-control-sm custom-checkbox">
                                    <input type="checkbox" class="custom-control-input"><span class="custom-control-label"></span>
                                </label>
                            </td>
                            <td class="user-avatar cell-detail user-info">
                                <img class="mt-0 mt-md-2 mt-lg-0" src="/static/img/img-avatar-1.png" alt="Avatar">
                                <span>{{ item.userName }}</span>
                                <span class="cell-detail-description">ID:{{ item.id }}</span>
                            </td>
                            <td>{{ item.phoneNumber }}</td>
                            <td>代理商用户</td>
                            <td>{{ item.parentId }}</td>
                            <td>{{ item.childCount }}</td>
                            <td class="number"> ￥{{ item.userBalance }}</td>
                            <td class="cell-detail">
                                <span>本月结算: ￥9,999</span>
                                <span class="cell-detail-description">总收益: ￥9,999</span>
                            </td>
                            <td class="cell-detail">
                                <span>本月成交: ￥9,999</span>
                                <span class="cell-detail-description">总成交: ￥9,999</span>
                            </td>
                            <td class="cell-detail">
                                <span>2018年04月29日</span>
                                <span class="cell-detail-description">11:11</span>
                            </td>
                            <td>
                                <button table-editor="kkkk" class="btn btn-rounded btn-space btn-success" data-toggle="modal">详情</button>
                                <button class="btn btn-rounded btn-space btn-danger" data-toggle="modal">加入黑名单</button>
                            </td>
                        </tr>
                    </@table_body>
                </@table>

                <@table_footer_ex status="当前显示第&nbsp;${(pageData.current)!'0'}&nbsp页。一共&nbsp;${(pageData.totalPage)!'0'}&nbsp;页">
                    <ng-light-pagination current="${page.current}" total="${page.total}" size="${page.size}">
                    </ng-light-pagination>
                </@table_footer_ex>
                </@table_wrap>
            </div>
        </div>
    </div>
</@page_body>
<@modal id='model-user-new'>
    <@modal_header title="新增用户">

    </@modal_header>
    <@formNovalidate id='form-user-add' class=''>
        <@modal_body>
    <div class="form-group">
        <label class="custom-control custom-radio custom-control-inline">
            <input class="custom-control-input" type="radio" name="userLevel" value="0" checked>
            <span class="custom-control-label">普通用户</span>
        </label>
        <label class="custom-control custom-radio custom-control-inline">
            <input class="custom-control-input" type="radio" name="userLevel" value="1">
            <span class="custom-control-label">代理用户</span>
        </label>
    </div>
        <div class="form-group">
            <label for="user-name">用户昵称</label>
            <input class="form-control form-control-xs"
                   id="user-name" name="userName"
                   autocomplete="off" type="text"
                   placeholder="请输入用户昵称">
        </div>
    <div class="form-group">
        <label for="user-phone">手机号码</label>
        <input class="form-control form-control-xs"
               id="user-phone" name="phoneNumber"
               autocomplete="off" type="tel"
               placeholder="请输入手机号码"
               required data-parsley-error-message="请输入手机号码">
    </div>
    <div class="form-group">
        <label for="user-password">登录密码</label>
        <input class="form-control form-control-xs"
               id="user-password" name="password"
               autocomplete="off" type="password"
               placeholder="请输入登录密码"
               required data-parsley-error-message="请输入登录密码">
    </div>
    <div class="form-group">
        <label for="user-parent">上级ID</label>
        <input class="form-control form-control-xs"
               id="user-parent" name="parentId"
               autocomplete="off" type="password"
               placeholder="请输入上级ID">
    </div>
        </@modal_body>
        <@modal_footer>
        <button class="btn btn-secondary md-close" type="button" data-dismiss="modal">取消</button>
        <button class="btn btn-primary md-close" type="submit">确认</button>
        </@modal_footer>
    </@formNovalidate>
</@modal>
<@page_foot>
<script type="text/ng-template" id="editModal.html">
        <@modal id='editModal'>
            <@modal_header title="编辑用户">

            </@modal_header>
            <@formNovalidate id='form-user-add' class=''>
                <@modal_body>
    <div class="form-group">
        <label class="custom-control custom-radio custom-control-inline">
            <input class="custom-control-input" type="radio" name="userLevel" value="0" checked>
            <span class="custom-control-label">普通用户</span>
        </label>
        <label class="custom-control custom-radio custom-control-inline">
            <input class="custom-control-input" type="radio" name="userLevel" value="1">
            <span class="custom-control-label">代理用户</span>
        </label>
    </div>
        <div class="form-group">
            <label for="user-name">用户昵称</label>
            <input class="form-control form-control-xs"
                   id="user-name" name="userName"
                   autocomplete="off" type="text"
                   placeholder="请输入用户昵称">
        </div>
    <div class="form-group">
        <label for="user-phone">手机号码</label>
        <input class="form-control form-control-xs"
               id="user-phone" name="phoneNumber"
               autocomplete="off" type="tel"
               placeholder="请输入手机号码"
               required data-parsley-error-message="请输入手机号码">
    </div>
    <div class="form-group">
        <label for="user-password">登录密码</label>
        <input class="form-control form-control-xs"
               id="user-password" name="password"
               autocomplete="off" type="password"
               placeholder="请输入登录密码"
               required data-parsley-error-message="请输入登录密码">
    </div>
    <div class="form-group">
        <label for="user-parent">上级ID</label>
        <input class="form-control form-control-xs"
               id="user-parent" name="parentId"
               autocomplete="off" type="password"
               placeholder="请输入上级ID">
    </div>
                </@modal_body>
                <@modal_footer>
        <button class="btn btn-secondary md-close" type="button" data-dismiss="modal">取消</button>
        <button class="btn btn-primary md-close" type="submit">确认</button>
                </@modal_footer>
            </@formNovalidate>
        </@modal>
</script>
<script src="/static/lib/parsley/parsley.min.js" type="text/javascript"></script>
<script src="/static/js/md5.min.js" type="text/javascript"></script>
<script src="/static/js/ng-light-pagination.js?v=${.now?string['hhmmSSsss']}"></script>
<script src="/static/js/ui-bootstrap-tpls-2.5.0.min.js"></script>
<script src="/static/js/ng-table-flow.js?v=${.now?string['hhmmSSsss']}"></script>
<script src="/static/js/admin.js?v=${.now?string['hhmmSSsss']}"></script>
<script type="text/javascript">
    $(document).ready(function () {
        //initialize the javascript
        var cli = new S7BuyCli();
        cli.init();
        const adminCli = new AdminCli();
        adminCli.list();
        <#--cli.initUser({pageData:${pageDataJson},userList:[{},{},{},{}]});-->
    });
</script>
</@page_foot>